<template>
  <view class="medical-help-page">
    <!-- 紧急医疗区域 -->
    <view class="emergency-section">
      <view class="section-title">
        <text class="title-icon">🚑</text>
        <text class="title-text">紧急医疗</text>
      </view>
      
      <view class="emergency-cards">
        <view class="emergency-card primary" @click="callAmbulance">
          <view class="card-icon">🚑</view>
          <view class="card-content">
            <text class="card-title">呼叫救护车</text>
            <text class="card-phone">120</text>
            <text class="card-desc">紧急医疗救援，24小时服务</text>
          </view>
          <view class="card-action">
            <text class="action-text">立即呼叫</text>
          </view>
        </view>

        <view class="emergency-card" @click="callEmergency">
          <view class="card-icon">📞</view>
          <view class="card-content">
            <text class="card-title">急救热线</text>
            <text class="card-phone">400-120-9999</text>
            <text class="card-desc">专业医疗指导，紧急情况咨询</text>
          </view>
          <view class="card-action">
            <text class="action-text">拨打热线</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 附近医院区域 -->
    <view class="hospital-section">
      <view class="section-title">
        <text class="title-icon">🏥</text>
        <text class="title-text">附近医院</text>
      </view>
      
      <view class="hospital-list">
        <view class="hospital-item" @click="selectHospital(0)">
          <view class="hospital-icon">🏥</view>
          <view class="hospital-info">
            <text class="hospital-name">智慧社区医院</text>
            <text class="hospital-address">距离：500米 | 24小时急诊</text>
            <text class="hospital-phone">电话：400-123-4567</text>
          </view>
          <view class="hospital-action">
            <text class="action-text">选择</text>
          </view>
        </view>
        
        <view class="hospital-item" @click="selectHospital(1)">
          <view class="hospital-icon">🏥</view>
          <view class="hospital-info">
            <text class="hospital-name">市中心医院</text>
            <text class="hospital-address">距离：2.5公里 | 三甲医院</text>
            <text class="hospital-phone">电话：400-123-4568</text>
          </view>
          <view class="hospital-action">
            <text class="action-text">选择</text>
          </view>
        </view>
        
        <view class="hospital-item" @click="selectHospital(2)">
          <view class="hospital-icon">🏥</view>
          <view class="hospital-info">
            <text class="hospital-name">儿童医院</text>
            <text class="hospital-address">距离：3.2公里 | 专科医院</text>
            <text class="hospital-phone">电话：400-123-4569</text>
          </view>
          <view class="hospital-action">
            <text class="action-text">选择</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 急救知识区域 -->
    <view class="first-aid-section">
      <view class="section-title">
        <text class="title-icon">📚</text>
        <text class="title-text">急救知识</text>
      </view>
      
      <view class="first-aid-grid">
        <view class="first-aid-item" @click="showFirstAidInfo(0)">
          <view class="item-icon">💓</view>
          <text class="item-label">心肺复苏</text>
        </view>
        
        <view class="first-aid-item" @click="showFirstAidInfo(1)">
          <view class="item-icon">🩹</view>
          <text class="item-label">止血包扎</text>
        </view>
        
        <view class="first-aid-item" @click="showFirstAidInfo(2)">
          <view class="item-icon">🌡️</view>
          <text class="item-label">发烧处理</text>
        </view>
        
        <view class="first-aid-item" @click="showFirstAidInfo(3)">
          <view class="item-icon">🤕</view>
          <text class="item-label">外伤处理</text>
        </view>
      </view>
    </view>

    <!-- 健康档案区域 -->
    <view class="health-record-section">
      <view class="section-title">
        <u-icon name="list" size="24" color="#666"></u-icon>
        <text class="title-text">健康档案</text>
      </view>
      
      <view class="record-cards">
        <view class="record-card" @click="viewHealthRecord">
          <view class="card-icon">📊</view>
          <view class="card-content">
            <text class="card-title">查看健康档案</text>
            <text class="card-desc">包含过敏史、用药记录等</text>
          </view>
          <view class="card-action">
            <text class="action-text">查看</text>
          </view>
        </view>
        
        <view class="record-card" @click="updateHealthRecord">
          <view class="card-icon">✏️</view>
          <view class="card-content">
            <text class="card-title">更新健康信息</text>
            <text class="card-desc">及时更新过敏史、用药情况</text>
          </view>
          <view class="card-action">
            <text class="action-text">更新</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 紧急联系人区域 -->
    <view class="contact-section">
      <view class="section-title">
        <u-icon name="account-multiple" size="24" color="#666"></u-icon>
        <text class="title-text">紧急联系人</text>
      </view>
      
      <view class="contact-list">
        <view class="contact-item" @click="callContact(0)">
          <view class="contact-avatar">👨</view>
          <view class="contact-info">
            <text class="contact-name">张三（父亲）</text>
            <text class="contact-phone">138****1234</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
        
        <view class="contact-item" @click="callContact(1)">
          <view class="contact-avatar">👩</view>
          <view class="contact-info">
            <text class="contact-name">李四（母亲）</text>
            <text class="contact-phone">139****5678</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
        
        <view class="contact-item" @click="callContact(2)">
          <view class="contact-avatar">👨‍⚕️</view>
          <view class="contact-info">
            <text class="contact-name">王医生（家庭医生）</text>
            <text class="contact-phone">137****9999</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 注意事项提示 -->
    <view class="notice-info">
      <view class="info-icon">⚠️</view>
      <view class="info-content">
        <text class="info-title">重要提醒</text>
        <text class="info-desc">紧急情况请优先拨打120，同时联系紧急联系人。保持冷静，按照专业指导进行急救。</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 医疗急救页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 医疗急救功能页面，提供紧急医疗、救护车等功能
 */

import { ref, reactive, onMounted } from 'vue'

// 页面数据
const selectedHospital = ref(0)

// 页面方法
const callAmbulance = () => {
  uni.showModal({
    title: '确认呼叫救护车',
    content: '是否拨打120呼叫救护车？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打120...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const callEmergency = () => {
  uni.showModal({
    title: '确认拨打',
    content: '是否拨打急救热线 400-120-9999？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const selectHospital = (index) => {
  selectedHospital.value = index
  const hospitals = ['智慧社区医院', '市中心医院', '儿童医院']
  uni.showToast({
    title: `已选择${hospitals[index]}`,
    icon: 'success'
  })
}

const showFirstAidInfo = (index) => {
  const topics = ['心肺复苏', '止血包扎', '发烧处理', '外伤处理']
  uni.showModal({
    title: topics[index],
    content: '此功能正在开发中，敬请期待。如需了解详细急救知识，请咨询专业医护人员。',
    showCancel: false,
    confirmText: '知道了'
  })
}

const viewHealthRecord = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const updateHealthRecord = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const callContact = (index) => {
  const contacts = ['张三（父亲）', '李四（母亲）', '王医生（家庭医生）']
  const phones = ['138****1234', '139****5678', '137****9999']
  
  uni.showModal({
    title: '确认拨打',
    content: `是否拨打${contacts[index]}的电话？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

// 页面生命周期
onMounted(() => {
  console.log('医疗急救页面已加载')
})
</script>

<style scoped>
.medical-help-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  padding-bottom: 40rpx;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.title-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

/* 紧急医疗区域 */
.emergency-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.emergency-cards {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.emergency-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #ff6b6b;
  transition: all 0.3s ease;
}

.emergency-card.primary {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: #fff;
}

.emergency-card.primary .card-title,
.emergency-card.primary .card-phone,
.emergency-card.primary .card-desc {
  color: #fff;
}

.card-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.card-content {
  flex: 1;
}

.card-title {
  display: block;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-phone {
  display: block;
  color: #ff6b6b;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.card-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.card-action {
  padding: 16rpx 24rpx;
  background: #ff6b6b;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.emergency-card.primary .card-action {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 附近医院区域 */
.hospital-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.hospital-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.hospital-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.hospital-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.hospital-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.hospital-address {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.hospital-phone {
  display: block;
  color: #ff6b6b;
  font-size: 24rpx;
}

.hospital-action {
  padding: 16rpx 24rpx;
  background: #ff6b6b;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 急救知识区域 */
.first-aid-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.first-aid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.first-aid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.first-aid-item:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.item-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.item-label {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

/* 健康档案区域 */
.health-record-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.record-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #ff6b6b;
  transition: all 0.3s ease;
}

.record-card:active {
  transform: scale(0.98);
  background: #e9ecef;
}

/* 紧急联系人区域 */
.contact-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.contact-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.contact-avatar {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.contact-info {
  flex: 1;
}

.contact-name {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.contact-phone {
  display: block;
  color: #ff6b6b;
  font-size: 24rpx;
}

.contact-action {
  padding: 16rpx 24rpx;
  background: #ff6b6b;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 注意事项提示 */
.notice-info {
  display: flex;
  align-items: flex-start;
  background: #fff;
  margin: 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.info-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.info-content {
  flex: 1;
}

.info-title {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.info-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
  line-height: 1.6;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .first-aid-grid {
    grid-template-columns: 1fr;
  }
  
  .emergency-cards,
  .hospital-list,
  .record-cards,
  .contact-list {
    gap: 20rpx;
  }
  
  .emergency-card,
  .hospital-item,
  .record-card,
  .contact-item {
    padding: 20rpx;
  }
}
</style>
